<script setup lang="ts">
const loadingText = ref('加载中')
const dots = ref('')

onMounted(() => {
	const interval = setInterval(() => {
		dots.value = dots.value.length >= 3 ? '' : dots.value + '.'
	}, 500)

	return () => clearInterval(interval)
})
</script>

<template>
	<div class="router-loading">
		<div class="loading-content">
			<a-spin size="large" />
			<div class="loading-text">{{ loadingText }}{{ dots }}</div>
		</div>
	</div>
</template>

<style scoped>
.router-loading {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
	background: #f5f5f5;
}

.loading-content {
	text-align: center;
}

.loading-text {
	margin-top: 16px;
	color: #666;
	font-size: 14px;
}
</style>
